<template>
  <div>
    <h1>商品列表</h1>
    <ul>
      <li v-for="item in this.goodsList" :key="item.id">
        商品:{{ item.name }}--{{ item.msg }}库存:{{ item.stock }}
        <button @click="change(item)">添加到购物车</button>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";

export default {
  computed: {
    ...mapState("goods", ["goodsList"]),
  },
  methods: {
    ...mapMutations("goods", ["reduceGoodsList"]),
    ...mapMutations("shopCar", ["addShopCarList"]),
    change(item) {
      this.addShopCarList(item);
      this.reduceGoodsList(item);
    },
  },
};
</script>
